<template>
  <div class="bigScreen">
    <div class="banner">
      <div class="show1">SanTanNew辅助</div>
      <div class="show2">简单、快捷、全面的一站式app自动化解决方案</div>
      <div class="show3">不用了解程序开发，即可快速实现各种app自动化功能</div>
    </div>
    <div class="feature" style="margin-top: 1em">
      <div class="feature_item">
        <img class="item_iconfont" :src="require('../assets/img/icon_1.png')" />
        <div class="title">"SanTanNew"是什么？</div>
        <div class="content">
          是一个让程序员或者不懂编程的"小白"在极短时间内、以最小成本实现各种app自动化功能的开发平台
          <a
            font-weight:="bold"
            href="https://www.bilibili.com/video/BV1y14y1376n"
            >（一个视频看懂冰狐智能辅助）</a
          >。
        </div>
      </div>
      <div class="feature_item">
        <img class="item_iconfont" :src="require('../assets/img/icon_2.png')" />
        <div class="title">"SanTanNew"能做什么？</div>
        <div class="content">
          "不需人工干预即可实现自动操控任何app，可用于制作app自动化工具、智能辅助、效率工具等。譬如："
          <a
            font-weight:="bold"
            href="https://www.bilibili.com/video/BV1y14y1376n"
            >自动化测试</a
          >、rpa、自动化运营、智能机器人、自动签到等等。
        </div>
      </div>
      <div class="feature_item">
        <img class="item_iconfont" :src="require('../assets/img/icon_3.png')" />
        <div class="title">为什么选择SanTanNew？</div>
        <div class="content">
          移动端：js脚本永久免费。支持各种模拟器；提供比autojs更好用的js版api；丰富的视频文档；高效的在线调试功能；强大的自动构建脚本功能。
          服务端：提供open api、SaaS和微服务。
        </div>
      </div>
    </div>
    <div class="titleSpecial">"SanTanNew"的亮点</div>
    <h2 class="sub_title_special">
      一站式app自动化解决方案，在很大程度上降低了开发门槛和成本、提升了研发效率。
    </h2>
    <div class="feature" style="margin-top: 1em">
      <div class="feature_item">
        <img class="item_iconfont" :src="require('../assets/img/icon_1.png')" />
        <div class="title">开发门槛低</div>
        <div class="content">
          冰狐使用标准js的子集（小白零基础一天学会），不需单独安装和配置开发环境；提供丰富的视频文档；很大程度上提升了开发效率。
        </div>
      </div>
      <div class="feature_item">
        <img class="item_iconfont" :src="require('../assets/img/icon_2.png')" />
        <div class="title">调试简便？</div>
        <div class="content">
          不需root；不需开启手机调试功能，不需连接手机和电脑，即可实现在线、远程、多设备调试；
          <a
            font-weight:="bold"
            href="https://www.bilibili.com/video/BV1y14y1376n"
            >支持远程桌面和设备控制；</a
          >很大程度提升了调试效率。
        </div>
      </div>
      <div class="feature_item">
        <img class="item_iconfont" :src="require('../assets/img/icon_3.png')" />
        <div class="title">自动构建脚本</div>
        <div class="content">
          对于不会编程的"小白"，不需了解任何编程知识，通过「自动构建脚本」功能的"搭积木"和
          参数配置即可快速地完成app自动化功能。
        </div>
      </div>

      <div class="feature_item">
        <img class="item_iconfont" :src="require('../assets/img/icon_3.png')" />
        <div class="title">SaaS</div>
        <div class="content">
          对于不会编程的"小白"，不需了解任何编程知识，通过「自动构建脚本」功能的"搭积木"和参
          数配置即可快速地完成app自动化功能。开发者不用单独开发后端服务，仅需使用系统提供的SaaS服务即可完
          成绝大部分业务，比如用户管理，设备管理，脚本管理等等。
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {},
  async created() {},
  methods: {},
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
.bigScreen {
  width: 90%;
  text-align: center;
  padding-top: 0em;
  margin: 0 auto;
  background-color: #f5f7fb !important;
  .banner {
    height: 180px;
    background-color: #4aac94;
    padding-top: 3em;
    .show1 {
      margin: 0;
      font-weight: 400;
      color: #fff;
      font-size: 3rem;
    }
    .show2 {
      margin-top: 1.2em;
      margin-bottom: 0;
      font-weight: 400;
      color: #fff;
      font-size: 1.2rem;
    }
    .show3 {
      font-weight: 400;
      margin-top: 0.8em;
      color: #fff;
      font-size: 1.2rem;
      margin-bottom: 0;
    }
  }
  .feature {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-font-smoothing: antialiased;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    text-align: center;
    box-sizing: border-box;
    margin-top: 1em;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    .feature_item {
      vertical-align: top;
      display: inline-block;
      width: 22em;
      height: 27em;
      margin: 1em 1em;
      background-color: #fff;
      padding: 0.5em 2.5em;
      box-shadow: 0 3px 3px 0 rgb(0 0 0 / 5%);
    }
    .item_iconfont {
      width: 5rem;
      height: 5rem;
      margin-top: 1.5em;
    }
    .title {
      margin-top: 0.6em;
      margin-bottom: 0.6em;
      font-size: 2.5rem;
      width: 100%;
    }
    .feature_item .content {
      line-height: 200%;
      font-size: 1rem;
      color: #444;
    }
  }
  a {
    color: #4aac94;
    text-decoration: none;
  }
}
h2 {
  display: block;
  font-size: 1.5em;
  margin-block-start: 0.83em;
  margin-block-end: 0.83em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
}
.titleSpecial {
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  font-size: 2.5rem;
  width: 100%;
}
</style>